<template>
  <view class="container">
    <u-empty text="没有数据" v-if="!hasData"></u-empty>
    <u--form labelPosition="left" :model="detail" ref="form" v-if="hasData">
      <uni-section class="form-section" title="订单明细" type="line">
        <u-form-item class="form-item" label="出发地" labelWidth="80" prop="startAddress" borderBottom ref="start-address">
          <u-input type="text" maxlength="10" v-model="detail.startAddress" clearable focus border="none"
            readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="目的地地" labelWidth="80" prop="endAddress" borderBottom ref="end-address">
          <u-input type="text" maxlength="10" v-model="detail.endAddress" clearable focus border="none"
            readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="出发时间" labelWidth="80" prop="startTime" borderBottom ref="start-time">
          <u-input type="text" maxlength="20" v-model="detail.startTime" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="乘车人数" labelWidth="80" prop="personNum" borderBottom ref="person-num">
          <u-input type="text" maxlength="20" v-model="detail.personNum" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="携带物品" labelWidth="80" prop="appendices" borderBottom ref="appendices">
          <u-input type="text" maxlength="20" v-model="detail.appendices" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="预估费用" labelWidth="80" prop="appendices" borderBottom ref="appendices">
          <u-input type="text" maxlength="20" v-model="detail.price" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="订单状态" labelWidth="80" prop="appendices" borderBottom ref="appendices">
          <u-input type="text" maxlength="20" v-model="orderStatus" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item v-if="detail.evaluate" class="form-item" label="评分" labelWidth="80" prop="evaluate" borderBottom
          ref="appendices">
          <u-rate v-model="evaluate.value" active-color="#FA3534" inactive-color="#b2b2b2" size="20" gutter="0" readonly
            allowHalf></u-rate>
        </u-form-item>
        <u-form-item v-if="detail.evaluate" class="form-item" label="评语" labelWidth="80" prop="evaluateText"
          borderBottom ref="appendices">
          <u-input type="text" maxlength="20" v-model="evaluate.text" border="none" readonly></u-input>
        </u-form-item>
      </uni-section>
    </u--form>

    <view style="margin: 5%;" v-show="orderStatus=='待接单'">
      <u--text wordWrap="anywhere" size="14"
        text="您的订单发布成功，司机将在出发前20分钟内接单并与你联系，为了确保司机准时来接您，请保持电话通畅，同时请您不要着急取消订单，平台保证有车出行;祝您旅途愉快，感谢支持!"></u--text>
      <u-loading-icon vertical mode="semicircle" text="派单中,请耐心等待" duration="500" color="green"
        size="60"></u-loading-icon>
    </view>
    <view style="margin: 5%;">
      <u-row justify="space-between" style="margin-top: 5%;">
        <u-button text="取消订单" v-show="orderStatus=='待接单'" type="error" @click="cancel">
        </u-button>
        <u-button text="评价" v-show="orderStatus!='待接单' && !detail.evaluate" type="primary"
          @click="showevaluate=true"></u-button>
      </u-row>
    </view>
    <u-modal ref="cancleModal" :show="showCancelConfirm" :content="cancleContent" title="温馨提示"
      :closeOnClickOverlay="true" :showCancelButton="true" @close="closeCancelModal" @cancel="showCancelConfirm=false"
      @confirm="cancelConfirm">
    </u-modal>
    <u-modal style="padding-bottom: 5rpx;" ref="evaluateModal" :show="showevaluate" :closeOnClickOverlay="true"
      :showCancelButton="true" @close="showevaluate=false" @cancel="showevaluate=false" @confirm="evaluateConfirm">
      <view style="width: 100%;padding: 0%;height: 80%;">
        <u--form ref="evaluateFrom" :model="evaluate">
          <u-form-item prop="evaluateValue">
            <u-rate v-model="evaluate.value" active-color="#FA3534" inactive-color="#b2b2b2" size="30" gutter="10"
              allowHalf></u-rate>
          </u-form-item>
          <u-form-item prop="evaluateText">
            <u--textarea v-model="evaluate.text" height="90" maxlength="240" placeholder="请输入评价" count></u--textarea>
          </u-form-item>
        </u--form>
      </view>
    </u-modal>
    <u-notify ref="uNotify"></u-notify>
  </view>
</template>

<script>
  import {
    queryOrder,
    cancelOrder,
    evaluateOrder
  } from '../../api/pinche';
  import config from '@/common/config';
  export default {
    data() {
      return {
        orderId: '',
        detail: {},
        showCancelConfirm: false,
        cancleContent: '您的订单发布成功，请您不要着急取消订单，平台保证有车出行',
        hasData: true,
        showevaluate: false,
        evaluate: {
          value: 4,
          text: ''
        }
      }
    },
    onLoad(e) {
      if (!e.id) {
        this.hasData = false;
      } else {
        this.hasData = true;
        this.orderId = e.id;
        this.queryOrderDetail(e.id);
        // this.queryOrderDetail(28);
      }
    },
    onReady() {

    },
    //去掉顶部左侧返回按钮
    mounted() {
      var a = document.getElementsByClassName('uni-page-head-hd')[0]
      a.style.display = 'none';
    },
    methods: {
      queryOrderDetail(id) {
        queryOrder({
          id: id
        }).then(res => {
          this.detail = res.data;
          this.detail.personNum = this.detail.personNum + '人';
          this.detail.price = 80;
          if (this.detail.evaluate) {
            this.evaluate.value = this.detail.evaluate.evaluate;
            this.evaluate.text = this.detail.evaluate.evaluateText;
          }
        })
      },
      cancel() {
        this.showCancelConfirm = true;
        this.cancleContent = "您的订单发布成功，请您不要着急取消订单，平台保证有车出行";
      },
      closeCancelModal() {
        this.showCancelConfirm = false;
      },
      cancelConfirm() {
        cancelOrder({
          id: this.orderId
        }).then(res => {
          if (res.data == true) {
            this.showCancelConfirm = false;
            this.openNotify('取消成功', 'success')
            this.queryOrderDetail(this.orderId);
          } else {
            this.openNotify('取消失败', 'error')
            this.cancleContent = "该状态订单不能取消，如要仍要取消，请联系客服"
          }
        })
      },
      evaluateConfirm() {
        console.log('evaluate' + JSON.stringify(this.evaluate))
        this.evaluate.orderId = this.orderId;
        this.evaluate.evaluate = this.evaluate.value;
        this.evaluate.evaluateText = this.evaluate.text;
        evaluateOrder(this.evaluate).then(res => {
          this.openNotify('评价成功', 'success')
          this.showevaluate = false;
          this.queryOrderDetail(this.orderId);
        })

      },
      openNotify(message, type) {
        this.$refs.uNotify.show({
          message: message,
          type: type,
          fontSize: 15,
          duration: 3000,
          safeAreaInsetTop: true
        })
      }
    },
    computed: {
      orderStatus: {
        get() {
          if (this.detail.status == 0) {
            return "待接单";
          } else if (this.detail.status == 1) {
            return "已接单";
          } else {
            return "已取消"
          }
        },
        set() {}
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form-section {
    padding-left: 17rpx;

    .form-item {
      padding-left: 17rpx;
    }
  }
</style>
